<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        基本信息
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         任务编号:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="任务编号由系统自动生成" v-model="planid" :disabled="true"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         任务名称:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入任务名称" v-model="name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         所属小区:
      </el-col>
      <el-col :span="7">
        <template>
          <el-cascader
            placeholder="请选择小区"
            :options="regionOptions"
            v-model="regionOptSelected"
            @change="changeArea"
            ></el-cascader>
          </el-select>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         责任人:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入责任人" v-model="charge_userid" :readonly="is_modifly" @focus="onGetPersonLiable"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         执行人:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入执行人" v-model="epName" :readonly="is_modifly" @focus="onGetExecutivePerson"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         巡检次数:
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入巡检次数" v-model="count" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">
        状态及备注
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
         计划状态:
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <template>
          <el-radio-group v-model="status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </template>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
         备注:
      </el-col>
      <el-col :span="17">
        <el-input type="textarea" v-model="note" placeholder="备注信息"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(242)" @click="onEditAd">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="onCreate">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
    
    
    
    <!--选择执行人弹出框 start-->
    <el-dialog title="指派执行人员" class="myRoleDialog" :visible.sync="executivePersonDialog" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchExaminer">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="epDlg"
          v-loading="dutyDlgListLoading"
          :data="dutyDlgList"
          :props="dutyDlgProps"
          node-key="staff_id"
          :render-content="renderContent"
          :filter-node-method="filterNodeep"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="executivePersonDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onepSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择执行人弹出框 end-->

    <!--选择责任人弹出框 start-->
    <el-dialog title="指派责任人员" class="myRoleDialog" :visible.sync="personLiableDialog" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchExaminer">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="dutyDlg"
          v-loading="dutyDlgListLoading"
          :data="dutyDlgList"
          :props="dutyDlgProps"
          node-key="staff_id"
          @check-change="onChange"
          :render-content="renderContent"
          :filter-node-method="filterNode"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="personLiableDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--选择责任人弹出框 end-->
  </div>
</template>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
  .myOV_y_400px{
    max-height: 400px;
    overflow-y:scroll;
    border:1px solid #f2f2f2; 
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>
<script>

  import { getRegion } from '@/utils/localstorage';
  import { extractAreaIds , onSetArea } from '@/utils/misc';
  import { addInspection , getInspectionDetail , updateInspection } from '@/api/routinginspectionplan';
  import { getStaffList } from '@/api/staff';
  import { setDealuser } from '@/api/maintenanceplan';
  export default {
    data(){
      return{
        title: "日常巡检计划管理",
        id: "",
        is_modifly:false,
        type:"",
        status:1,
        regionOptions: [],
        regionOptSelected: [],
        //roleDataList:[],
        RoleDataProps:{},
        personLiableDialog:false,
        executivePersonDialog:false,
        name:"",
        count:"",
        charge_userid:"",
        note:"",
        dutyDlgList:[],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        dutyDlgListLoading:false,
        epDlgListLoading:false,
        personLiable:{},
        plName:"",
        plId:"",
        epName:"",
        epId:"",
        planid:"",
        r_kw:"",
        a_id:"",
        r_kw_p:"",
        areaList:[]
      }
    },
    components: {
        
    },
    watch: {
      r_kw(val) {
        try{
          this.$refs.dutyDlg.filter(val);
        }catch(error){
          return;
        }
        try{
          this.$refs.epDlg.filter(val);
        }catch(error){
          return;
        }
      },
      // areaIds(val){
      //   try{
      //     this.charge_userid="";
      //     this.plId="";
      //     this.epName="";
      //     this.epId="";
      //   }catch(error){
      //     return;
      //   }
      // }
    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
    mounted(){
      document.title = this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
    },
    created(){
      document.title=this.title;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      if(this.type=='add'){

      }
      if(this.type=='update'){
        this.onGetDetail();
      }
      
    },
    methods:{     
      filterNode(value, data) {
        if (!value) return true;
        return data.user_name.indexOf(value) !== -1;
      },
      filterNodeep(value, data){
        if (!value) return true;
        return data.user_name.indexOf(value) !== -1;
      },
      onCreate(){//添加
        let vm=this;
        let params={
          name:vm.name,
          count:vm.count,
          status:vm.status,
          charge_userid:vm.plId,
          area_id:vm.areaIds,
          userids:vm.epId,
          usernames:vm.epName,
          note:vm.note
        }
        console.log(params)
        addInspection(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.$router.go(-1);
          //console.log("ok",res);
        }).catch(error => {
          vm.$message.error("执行失败！");
          //console.log("no",error);
        })
      },
      onBack(){//返回
        this.$router.go(-1);
      },
      onGetPersonLiable(){//指派责任人
        this.r_kw="";
        this.fetchStaff();
        this.personLiableDialog = true;
      },
      handlePersonLiableClick(){

      },
      onGetExecutivePerson(){
        this.r_kw="";
        this.fetchStaff();
        this.executivePersonDialog=true;
      },
      onepSub(){//确认执行人
        let vm=this;
        vm.epName="";
        vm.epId="";
        var ep = vm.$refs.epDlg.getCheckedNodes();
        for(let i=0; i<ep.length; i++){
          vm.epName+=ep[i].user_name+",";
          vm.epId+=ep[i].staff_id+",";
        }
        vm.epName=vm.epName.substring(0,vm.epName.length-1);
        vm.epId=vm.epId.substring(0,vm.epId.length-1);
        //console.log(vm.epName,vm.epId)

        this.executivePersonDialog=false;
      },
      fetchStaff() {//获取人员列表
        let vm = this;
        //vm.r_kw="";
        vm.dutyDlgListLoading = true;
        let params = {
          kw:vm.r_kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 10000,
          ril: 'S',
          area_id:vm.areaIds,
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          //console.log(vm.dutyDlgList)
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.dutyDlg.setCheckedKeys([]);
          vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
        }else{
          vm.$refs.dutyDlg.setCheckedKeys([]);
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      onAssignSub(){//确认责任人
        let vm=this;
        var pl = vm.$refs.dutyDlg.getCheckedNodes();
        if (pl.length > 0) {
          vm.charge_userid=pl[0].user_name;
          vm.plName = pl[0].user_name;
          vm.plId = pl[0].staff_id;
        }
        vm.personLiableDialog=false;
      },
      onGetDetail(){//拉取详细
        let vm=this;
        getInspectionDetail(vm.id).then(response => {
          let res=response.data;
          vm.planid=res.id;
          vm.name=res.name;
          
          vm.regionOptSelected=onSetArea(vm.regionOptions,res.area_id);

          vm.charge_userid=res.charge_username;
          vm.plName = res.charge_username;
          vm.plId = res.charge_userid;
          let data="";
          let dataid="";
          for(let i=0; i<res.username_list.length; i++){
            data+=res.username_list[i]+",";
            dataid+=res.userid_list[i]+",";
          }
          vm.epName=data.substring(0,data.length-1);
          vm.epId=dataid.substring(0,dataid.length-1);
          vm.count=res.count;
          vm.status=res.status;
          vm.note=res.note;
          //console.log("yes",res);
        }).catch(error => {
          //console.log("no",error);
        })
      },
      onSearchExaminer(){
        this.fetchStaff();
      },
      onEditAd(){
        let vm=this;
        let params={
          id:vm.id,
          name:vm.name,
          count:vm.count,
          status:vm.status,
          charge_userid:vm.plId,
          area_id:vm.areaIds,
          userids:vm.epId,
          usernames:vm.epName,
          note:vm.note
        }
        //console.log("----",params)
        updateInspection(params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.$router.go(-1);
          //console.log("ok",res);
        }).catch(error => {
          vm.$message.error("执行失败！");
          //console.log("no",error);
        })
      },
      changeArea(){
        this.charge_userid="";
        this.plId="";
        this.epName="";
        this.epId="";
      }
    }
  
  }


</script>



